<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {useRouter} from "vue-router";
import Head from "@/components/Head.vue";
import {deletedGoodsService, getMyPushGoodsService} from "@/api/goods.js";
import {deletedRequiredGoodsService, getMyPushRequiredGoodsService} from "@/api/requiredGoods.js";
import RequiredGoodsItem from "@/components/requiredGoodsItem.vue";
import {debounce} from "lodash";
import {ElMessage, ElMessageBox} from "element-plus";
import ProductItem from "@/views/productItem.vue";

const title = ref('');
const route = useRouter();

const mode = ref(0); // 0: 我发布的商品 1: 我发布的求购
const myGoods = ref([]);
const myRequiredGoods = ref([]);

let currentPage = ref(1); //当前页数
const pageSize = ref(10); //每页显示条数
const total = ref(0); //总条数
const hasMore = ref(true); //是否还有更多数据
const deletedButton = ref(false);
const deletedIds = ref([]); //删除的ids

//跟据mode获取列表
const getListByMode = debounce(async ()=>{
  console.log('getList执行')
  if(mode.value === 0){
    console.log('我发布的商品', currentPage.value,pageSize.value)
    let res = await getMyPushGoodsService(currentPage.value,pageSize.value);
    // 判断是否还有更多数据
    if (res.data.total <= currentPage.value * pageSize.value) {
      hasMore.value = false;
    }
    myGoods.value.push(...res.data.records);
    total.value = res.data.total;
    currentPage.value += 1;
  }else if (mode.value === 1){
    console.log('我发布的求购',currentPage.value,pageSize.value)
    let res = await getMyPushRequiredGoodsService(currentPage.value,pageSize.value);
    // 判断是否还有更多数据
    if (res.data.total <= currentPage.value * pageSize.value) {
      hasMore.value = false;
    }
    myRequiredGoods.value.push(...res.data.records);
    total.value = res.data.total;
    currentPage.value += 1;
    console.log(currentPage.value)
  }
},100)

onMounted(()=>{
  title.value = route.currentRoute.value.meta.title;
  document.title = title.value;
})
watch(mode,  async (newVal, oldVal)=>{
  myGoods.value = [];
  myRequiredGoods.value = [];
  currentPage.value = 1;
  hasMore.value = true;
  cancelDeleted();
  await getListByMode();
})

const checkedBox = (id,checked)=>{
  if (checked){
    //选中
    if (deletedIds.value.indexOf(id) === -1){
      deletedIds.value.push(id);
    }
  }else {
    //取消选中
    if (deletedIds.value.indexOf(id) !== -1){
      deletedIds.value.splice(deletedIds.value.indexOf(id),1);
    }
  }
}

//取消删除
const cancelDeleted = ()=>{
  deletedButton.value = false;
  deletedIds.value = [];
}

//确认删除
const confirmDeleted = ()=>{
  ElMessageBox.confirm(
      '您确定要删除吗?',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }

  )
      .then(async () => {
        if (mode.value === 0){
          await deletedGoodsService(deletedIds.value);
        }else if (mode.value === 1){
          await deletedRequiredGoodsService(deletedIds.value);
        }
        myGoods.value = [];
        myRequiredGoods.value = [];
        currentPage.value = 1;
        hasMore.value = true;
        cancelDeleted();
        await getListByMode();
        ElMessage({
          type: 'success',
          message: '删除成功',
          customClass: 'global-messageZindex'
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '操作取消',
          customClass: 'global-messageZindex'
        })
      })
}
</script>

<template>
  <div class="main">
    <Head :title="title" :index="2"/>
    <div class="buttons">
      <el-radio-group v-model="mode">
        <el-radio-button label="我发布的商品" :value="0"/>
        <el-radio-button label="我发布的求购" :value="1"/>
      </el-radio-group>
      <el-button type="warning" v-if="!deletedButton" @click="deletedButton = true">批量删除</el-button>
      <div v-if="deletedButton" style="display: flex">
        <el-button type="info" @click="cancelDeleted">取消</el-button>
        <el-button type="danger" @click="confirmDeleted">确认删除</el-button>
      </div>
    </div>
    <el-main
        class="container"
        v-infinite-scroll="getListByMode"
        :infinite-scroll-disabled="!hasMore"
        :infinite-scroll-distance="10"
        :infinite-scroll-immediate-check="false"
        @infinite-scroll-complete=""
        :infinite-scroll-delay="1000"
    >
      <div v-if="mode === 0" class="el-container-goods">
        <div class="goods-item">
          <div v-for="(item,index) in myGoods" :key="index" class="grid-item">
            <el-checkbox @change="checked=>checkedBox(item.id,checked)" v-if="deletedButton" style="margin-right: 20px;" size="large"/>
            <ProductItem :goods="item" />
          </div>
        </div>
          <div>
            <div v-if="hasMore" v-loading="true" class="data-loading"></div>
            <p class="no-more" v-if="!hasMore">没有更多了...</p>
          </div>
      </div>
      <el-container v-if="mode === 1" class="el-container-requiredGoods">
        <div
            style="display: flex;width: 100%;height: 100%;justify-content: center;"
            v-for="(item,index) in myRequiredGoods"
            :key="index"
        >
          <el-checkbox @change="checked=>checkedBox(item.id,checked)" v-if="deletedButton" style="margin-right: 20px;" size="large"/>
          <RequiredGoodsItem
              :mode="1"
              :requiredGoods="item"
          />
        </div>
        <div v-if="hasMore" v-loading="true" class="data-loading"></div>
        <p class="no-more" v-if="!hasMore">没有更多了...</p>
      </el-container>
    </el-main>
  </div>
</template>

<style scoped>
.main{
  height: 100vh;
  width: 100vw;
  .buttons{
    padding: 15px 40px 5px 40px;
    display: flex;
    justify-content: space-between;
  }
  .container{
    width: 100%;
    height: calc(100% - 17%);
    display: flex;
    justify-content: center;
    .el-container-requiredGoods{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .el-container-goods{
      display: flex;
      flex-direction: column;
      align-items: center;
      .goods-item{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        .grid-item{
          display: flex;
        }
      }
      .data-loading{
        margin-top: 10px;
        text-align: center;
      }
      .no-more{
        text-align: center;
        color: #999;
        font-size: 20px;
        padding: 15px 0;
      }
    }
  }
}
</style>